<template>
  <!-- 权限管理 -->
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tools>
        <el-button
          slot="after"
          type="primary"
          size="small"
          @click="addPermission('0', 1)"
          >添加权限</el-button
        >
      </page-tools>
      <!-- 表格 -->
      <!-- 如果要用树形的话 必须给一个属性 row-key -->
      <el-table :data="list" row-key="id" border>
        <el-table-column label="菜单名称" prop="name"> </el-table-column>
        <el-table-column label="权限标识" prop="code"> </el-table-column>
        <el-table-column label="描述" prop="description"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.type === 1"
              type="text"
              @click="addPermission(row.id, 2)"
              >添加</el-button
            >
            <el-button type="text" @click="editPermission(row.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="delPermission(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加和编辑弹层 -->
    <el-dialog :visible="showDialog" title="新增编辑" @close="btnCancel">
      <el-form
        :rules="formRules"
        :model="formList"
        ref="formRef"
        label-width="120px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formList.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formList.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formList.description"></el-input>
        </el-form-item>
        <el-form-item label="开启">
          <!-- 当我们的值为1时激活，为0时不激活 -->
          <el-switch
            v-model="formList.enVisible"
            active-value="1"
            inactive-value="0"
            style="width:90%"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 确认和取消按钮 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnOk">确认</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 获取权限API接口
import {
  getPermissionList,
  delPermission,
  addPermission,
  updatePermission,
  getPermissionDetail
} from "@/api/permission";
// 引入数组转换树形结构的函数方法
import { transListDateTree } from "@/utils";
export default {
  // 组件名称
  name: "Permission",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      list: [],
      showDialog: false,
      formList: {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型，节点显示类型
        pid: "", // 因为是DOM书，需要知道添加哪一个节点
        enVisible: "0" // 开启
      },
      formRules: {
        name: [
          { required: true, message: "权限名称不能为空", trigger: "blur" }
        ],
        code: [{ required: true, message: "权限标识不能为空", trigger: "blur" }]
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 获取权限列表
    async getPermissionList() {
      // transListDateTree 第一个值是当前的数组，第二个值是根节点，也就是pid的值
      this.list = transListDateTree(await getPermissionList(), "0");
      // console.log(res);
    },
    // 删除权限
    async delPermission(id) {
      try {
        await this.$confirm("确认要删除该数据吗吗？");
        await delPermission(id);
        this.getPermissionList(); // 刷新渲染界面
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 编辑权限
    async editPermission(id) {
      this.formList = await getPermissionDetail(id);
      this.showDialog = true;
    },
    addPermission(pid, type) {
      this.formList.type = type;
      this.formList.pid = pid;
      this.showDialog = true;
    },
    // 确认按钮
    async btnOk() {
      try {
        await this.$refs.formRef.validate();
        console.log(this.formList);
        if (this.formList.id) {
          await updatePermission(this.formList);
        } else {
          await addPermission(this.formList);
        }
        this.getPermissionList(); // 重新渲染页面
        this.$message.success("添加成功");
        this.showDialog = false;
      } catch (error) {
        console.log(error);
      }
    },
    // 取消按钮
    btnCancel() {
      this.formList = {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型，节点显示类型
        pid: "", // 因为是DOM书，需要知道添加哪一个节点
        enVisible: "0" // 开启
      };
      this.$refs.formRef.resetFields();
      this.showDialog = false;
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getPermissionList();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {}
};
</script>

<style scoped lang="less"></style>
